<template>
  <view class="chat-detail">
    <!-- 背景装饰 -->
    <view class="bg-decoration-top"></view>
    <view class="bg-decoration-bottom"></view>
    
    <!-- 顶部导航栏 -->
    <view class="chat-header">
      <view class="header-left" @click="navigateBack">
        <uni-icons type="arrow-left" size="22" color="#fff"></uni-icons>
      </view>
      <view class="header-title">{{ conversationTitle }}</view>
      <view class="header-right">
        <uni-icons type="ellipsis" size="22" color="#fff" @click="showOptions"></uni-icons>
      </view>
    </view>

    <!-- 消息列表区域 -->
    <scroll-view 
      class="message-list" 
      scroll-y 
      :scroll-into-view="scrollToView"
      @scrolltoupper="loadMoreMessages"
      scroll-with-animation
    >
      <!-- 消息分组 -->
      <view 
        v-for="(group, index) in messageGroups" 
        :key="index"
        :id="`message-group-${index}`"
      >
        <!-- 时间显示 -->
        <view class="time-divider" v-if="shouldShowTimeDivider(index)">
          {{ formatMessageTime(group[0].timestamp) }}
        </view>

        <!-- 单条消息 -->
        <view 
          v-for="(message, msgIndex) in group" 
          :key="message.id || msgIndex"
          class="message-wrapper"
          :class="{
            'user-message': message.from === 'user',
            'ai-message': message.from === 'ai'
          }"
        >
          <!-- 消息内容 -->
          <view 
            class="message-content"
            v-if="!message.isRecalled && !message.isTyping"
          >
            <!-- 文本消息 -->
            <view class="text-message" v-if="!message.type || message.type === 'text'">
              {{ message.content }}
            </view>
          </view>

          <!-- 正在输入提示 -->
          <view v-else-if="message.isTyping" class="typing-message">
            <view class="typing-dots">
              <view class="dot"></view>
              <view class="dot"></view>
              <view class="dot"></view>
            </view>
          </view>

          <!-- 撤回消息 -->
          <view v-else-if="message.isRecalled" class="recalled-message">
            {{ message.content }}
          </view>

          <!-- 消息状态 -->
          <view v-if="message.from === 'user'" class="message-status">
            <uni-icons 
              v-if="messageStatus.get(message.id) === 'sending'" 
              type="spinner" 
              size="14" 
              color="#999"
            ></uni-icons>
            <uni-icons 
              v-else-if="messageStatus.get(message.id) === 'sent'" 
              type="success" 
              size="14" 
              color="#999"
            ></uni-icons>
            <uni-icons 
              v-else-if="messageStatus.get(message.id) === 'failed'" 
              type="clear" 
              size="14" 
              color="#f00"
              @click="resendMessage(message)"
            ></uni-icons>
          </view>
        </view>
      </view>

      <!-- 加载更多提示 -->
      <view class="load-more" v-if="loadingMore">
        <uni-icons type="spinner" size="16" color="#FF85B3"></uni-icons>
        <text>加载更多...</text>
      </view>

      <!-- 没有更多消息 -->
      <view class="no-more" v-if="noMoreMessages">
        没有更多消息了
      </view>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-area">
      <view class="input-wrapper">
        <input 
          class="message-input" 
          v-model="inputContent"
          type="text"
          placeholder="输入消息给挚友小星吧~"
          @confirm="sendMessage"
          :disabled="sending"
        />
        <button 
          class="send-button" 
          @click="sendMessage"
          :disabled="!inputContent.trim() || sending"
        >
          发送
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// 导入uni-icons组件
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
import chatApi from '../../api/chat'
import wsManager from '@/utils/websocket.js'

export default {
  name: 'ChatDetail',
  components: {
    uniIcons
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    // 响应式数据
    const conversationId = ref(route.query.id || '')
    const conversationTitle = ref('挚友小星')
    const messages = ref([])
    const messageStatus = ref(new Map())
    const inputContent = ref('')
    const loading = ref(false)
    const loadingMore = ref(false)
    const sending = ref(false)
    const noMoreMessages = ref(false)
    const scrollToView = ref('')
    const lastMessageId = ref('')

    // 计算属性：消息分组
    const messageGroups = computed(() => {
      if (!messages.value.length) return []
      
      const groups = []
      let currentGroup = [messages.value[0]]
      
      for (let i = 1; i < messages.value.length; i++) {
        const current = messages.value[i]
        const prev = messages.value[i - 1]
        
        // 如果时间间隔小于5分钟且来自同一发送者，合并到同一组
        const timeDiff = (current.timestamp - prev.timestamp) / 1000 / 60
        if (timeDiff < 5 && current.from === prev.from) {
          currentGroup.push(current)
        } else {
          groups.push(currentGroup)
          currentGroup = [current]
        }
      }
      
      groups.push(currentGroup)
      return groups
    })

    // 更新最后一条消息ID
    const updateLastMessageId = () => {
      if (messages.value.length > 0) {
        lastMessageId.value = messages.value[messages.value.length - 1].id
      }
    }

    // 滚动到底部
    const scrollToBottom = async () => {
      await nextTick()
      scrollToView.value = `message-group-${messageGroups.value.length - 1}`
    }

    // 格式化消息时间
    const formatMessageTime = (timestamp) => {
      const date = new Date(timestamp)
      const now = new Date()
      const diff = now - date
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      
      if (days === 0) {
        return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
      } else if (days === 1) {
        return `昨天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`
      } else if (days < 7) {
        const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        return `${weekDays[date.getDay()]} ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`
      } else {
        return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
      }
    }

    // 判断是否显示时间分隔符
    const shouldShowTimeDivider = (groupIndex) => {
      return true // 为每个消息组显示时间
    }

    // 加载消息
    const loadMessages = async () => {
      if (!conversationId.value) return
      
      loading.value = true
      try {
        const res = await chatApi.getMessages(conversationId.value)
        if (res.code === 200 && res.data) {
          messages.value = res.data.messages || []
          updateLastMessageId()
          await nextTick()
          scrollToBottom()
        }
      } catch (error) {
        console.error('加载消息失败:', error)
        uni.showToast({
          title: '加载消息失败',
          icon: 'none'
        })
      } finally {
        loading.value = false
      }
    }

    // 加载更多消息
    const loadMoreMessages = async () => {
      if (!conversationId.value || loadingMore.value || noMoreMessages.value) return
      
      loadingMore.value = true
      try {
        const oldestMessage = messages.value[0]
        const res = await chatApi.getMessages(conversationId.value, {
          beforeTime: oldestMessage?.timestamp
        })
        
        if (res.code === 200 && res.data && res.data.messages && res.data.messages.length > 0) {
          messages.value = [...res.data.messages, ...messages.value]
        } else {
          noMoreMessages.value = true
        }
      } catch (error) {
        console.error('加载更多消息失败:', error)
      } finally {
        loadingMore.value = false
      }
    }

    // 发送消息
    const sendMessage = async () => {
      const content = inputContent.value.trim()
      if (!content || sending.value) return
      
      inputContent.value = ''
      
      // 添加用户消息
      const userMessage = {
        id: Date.now().toString(),
        from: 'user',
        content: content,
        timestamp: new Date().getTime(),
        localId: Date.now().toString()
      }
      messages.value.push(userMessage)
      messageStatus.value.set(userMessage.id, 'sending')
      updateLastMessageId()
      
      // 显示AI正在输入
      const typingMessage = {
        id: (Date.now() + 1).toString(),
        from: 'ai',
        content: '',
        isTyping: true,
        timestamp: new Date().getTime()
      }
      messages.value.push(typingMessage)
      updateLastMessageId()
      
      sending.value = true
      
      try {
        // 准备请求参数
        const requestParams = {
          user: 'zhaoliu', // 使用固定用户名或从用户状态获取
          conversation_id: conversationId.value || '',
          query: content,
          inputs: {}, // 可以根据需要添加inputs参数
          auto_generate_name: true,
          response_mode: 'streaming' // 默认使用流式模式
        };
        
        // 定义数据块处理回调
        const onChunk = (data) => {
          console.log('接收到数据块:', data);
          
          // 确保data是对象
          if (!data || typeof data !== 'object') {
            console.error('接收到的数据格式无效:', data);
            return;
          }
          
          // 处理流式响应数据
          const aiMessageIndex = messages.value.findIndex(msg => msg.id === typingMessage.id);
          if (aiMessageIndex !== -1) {
            // 处理流式响应消息，优先使用直接的answer字段，如果不存在再尝试data.data.outputs.answer
            messages.value[aiMessageIndex].content = data.answer || (data.data?.outputs?.answer) || '';
            messages.value[aiMessageIndex].isTyping = false;
            updateLastMessageId();
          }
          
          // 保存会话ID
          if (data.conversation_id) {
            conversationId.value = data.conversation_id;
          }
          
          // 滚动到底部
          nextTick(() => {
            scrollToBottom();
          });
        };
        
        // 定义完成回调
        const onComplete = (data) => {
          console.log('消息发送完成:', data);
          
          // 更新AI消息状态和内容
          const aiMessageIndex = messages.value.findIndex(msg => msg.id === typingMessage.id);
          if (aiMessageIndex !== -1) {
            // 处理完成事件，优先使用直接的answer字段，如果不存在再尝试data.data.outputs.answer
            const answer = data.answer || (data.data?.outputs?.answer) || '抱歉，我暂时无法回答这个问题。';
            messages.value[aiMessageIndex].content = answer;
            messages.value[aiMessageIndex].isTyping = false;
            messages.value[aiMessageIndex].id = data.message_id || (Date.now() + 2).toString();
            updateLastMessageId();
          }
          
          // 更新用户消息状态为已发送
          messageStatus.value.set(userMessage.id, 'sent');
          
          // 保存会话ID
          if (data.conversation_id) {
            conversationId.value = data.conversation_id;
            // 如果是新会话，更新路由参数
            if (!route.query.id) {
              router.push(`/pages/chat/chatDetail?id=${data.conversation_id}`);
            }
          }
        };
        
        // 定义错误回调
        const onError = (error) => {
          console.error('消息发送错误:', error);
          
          // 更新消息状态为失败
          messageStatus.value.set(userMessage.id, 'failed');
          
          // 显示错误提示
          uni.showToast({
            title: `发送失败: ${error.message || '未知错误'}`,
            icon: 'none',
            duration: 2000
          });
          
          // 移除正在输入的消息
          const typingIndex = messages.value.findIndex(msg => msg.id === typingMessage.id);
          if (typingIndex !== -1) {
            messages.value.splice(typingIndex, 1);
          }
        };
        
        // 调用重构后的sendChatMessage函数
        await chatApi.sendChatMessage(requestParams, onChunk, onComplete, onError);
      } catch (error) {
        console.error('发送消息失败:', error);
        
        // 更新消息状态为发送失败
        messageStatus.value.set(userMessage.id, 'failed');
        
        // 移除正在输入的消息
        const typingIndex = messages.value.findIndex(msg => msg.id === typingMessage.id);
        if (typingIndex !== -1) {
          messages.value.splice(typingIndex, 1);
        }
        
        // 显示错误提示
        uni.showToast({
          title: '发送失败，请稍后重试',
          icon: 'none',
          duration: 2000
        });
      } finally {
        sending.value = false;
        await nextTick();
        scrollToBottom();
      }
    }

    // 重新发送消息
    const resendMessage = async (message) => {
      // 更新消息状态为正在发送
      messageStatus.value.set(message.id, 'sending')
      
      // 显示AI正在输入
      const typingMessage = {
        id: (Date.now() + 1).toString(),
        from: 'ai',
        content: '',
        isTyping: true,
        timestamp: new Date().getTime()
      }
      messages.value.push(typingMessage)
      updateLastMessageId()
      
      try {
        // 准备请求参数
        const requestParams = {
          user: 'zhaoliu', // 使用固定用户名或从用户状态获取
          conversation_id: conversationId.value || '',
          query: message.content,
          inputs: {}, // 可以根据需要添加inputs参数
          auto_generate_name: true,
          response_mode: 'streaming' // 默认使用流式模式
        };
        
        // 处理文件参数（如果有）
        if (message.files && message.files.length > 0) {
          requestParams.files = message.files.map(file => ({
            name: file.name,
            type: file.type || 'document',
            transfer_method: 'local_file',
            upload_file_id: file.file_id || file.id
          }));
          console.log('重发消息包含文件，文件数量:', requestParams.files.length);
        }
        
        // 定义数据块处理回调
        const onChunk = (data) => {
          console.log('接收到重发消息的数据块:', data);
          
          // 确保data是对象
          if (!data || typeof data !== 'object') {
            console.error('接收到的数据格式无效:', data);
            return;
          }
          
          // 处理流式响应数据
          const aiMessageIndex = messages.value.findIndex(msg => msg.id === typingMessage.id);
          if (aiMessageIndex !== -1) {
            // 处理流式响应消息，优先使用直接的answer字段，如果不存在再尝试data.data.outputs.answer
            messages.value[aiMessageIndex].content = data.answer || (data.data?.outputs?.answer) || '';
            messages.value[aiMessageIndex].isTyping = false;
            updateLastMessageId();
          }
          
          // 保存会话ID
          if (data.conversation_id) {
            conversationId.value = data.conversation_id;
          }
          
          // 滚动到底部
          nextTick(() => {
            scrollToBottom();
          });
        };
        
        // 定义完成回调
        const onComplete = (data) => {
          console.log('重发消息完成:', data);
          
          // 更新AI消息状态和内容
          const aiMessageIndex = messages.value.findIndex(msg => msg.id === typingMessage.id);
          if (aiMessageIndex !== -1) {
            // 处理完成事件，优先使用直接的answer字段，如果不存在再尝试data.data.outputs.answer
            const answer = data.answer || (data.data?.outputs?.answer) || '抱歉，我暂时无法回答这个问题。';
            messages.value[aiMessageIndex].content = answer;
            messages.value[aiMessageIndex].isTyping = false;
            messages.value[aiMessageIndex].id = data.message_id || (Date.now() + 2).toString();
            updateLastMessageId();
          }
          
          // 更新用户消息状态为已发送
          messageStatus.value.set(message.id, 'sent');
          
          // 保存会话ID
          if (data.conversation_id) {
            conversationId.value = data.conversation_id;
            // 如果是新会话，更新路由参数
            if (!route.query.id) {
              router.push(`/pages/chat/chatDetail?id=${data.conversation_id}`);
            }
          }
        };
        
        // 定义错误回调
        const onError = (error) => {
          console.error('重发消息错误:', error);
          
          // 更新消息状态为失败
          messageStatus.value.set(message.id, 'failed');
          
          // 显示错误提示
          uni.showToast({
            title: `发送失败: ${error.message || '未知错误'}`,
            icon: 'none',
            duration: 2000
          });
          
          // 移除正在输入的消息
          const typingIndex = messages.value.findIndex(msg => msg.id === typingMessage.id);
          if (typingIndex !== -1) {
            messages.value.splice(typingIndex, 1);
          }
        };
        
        // 调用重构后的sendChatMessage函数
        await chatApi.sendChatMessage(requestParams, onChunk, onComplete, onError);
      } catch (error) {
        console.error('重新发送消息失败:', error);
        
        // 更新消息状态为发送失败
        messageStatus.value.set(message.id, 'failed');
        
        // 移除正在输入的消息
        const typingIndex = messages.value.findIndex(msg => msg.id === typingMessage.id);
        if (typingIndex !== -1) {
          messages.value.splice(typingIndex, 1);
        }
        
        // 显示错误提示
        uni.showToast({
          title: '发送失败，请稍后重试',
          icon: 'none',
          duration: 2000
        });
      } finally {
        await nextTick();
        scrollToBottom();
      }
    }

    // 返回上一页
    const navigateBack = () => {
      router.back()
    }
    
    // 显示选项菜单
    const showOptions = () => {
      uni.showActionSheet({
        itemList: ['清空聊天记录', '删除会话'],
        success: function(res) {
          if (res.tapIndex === 0) {
            // 清空聊天记录
            uni.showModal({
              title: '确认清空',
              content: '确定要清空当前聊天记录吗？',
              success: function(confirmRes) {
                if (confirmRes.confirm) {
                  messages.value = []
                  uni.showToast({ title: '已清空', icon: 'success' })
                }
              }
            })
          } else if (res.tapIndex === 1) {
            // 删除会话
            uni.showModal({
              title: '确认删除',
              content: '确定要删除这个会话吗？',
              success: function(confirmRes) {
                if (confirmRes.confirm) {
                  // 这里可以调用API删除会话
                  router.replace('/pages/chat/conversationList')
                  uni.showToast({ title: '已删除', icon: 'success' })
                }
              }
            })
          }
        }
      })
    }

    // 监听路由参数变化
    watch(() => route.query.id, (newId) => {
      if (newId !== conversationId.value) {
        conversationId.value = newId
        messages.value = []
        messageStatus.value.clear()
        noMoreMessages.value = false
        loadMessages()
      }
    })

    // 生命周期
    onMounted(() => {
        // 初始化WebSocket连接
        try {
          console.log('尝试建立WebSocket连接...');
          wsManager.connect(
            () => console.log('WebSocket连接成功'),
            (error) => console.error('WebSocket连接失败:', error)
          );
        } catch (error) {
          console.error('WebSocket初始化失败:', error);
        }
      
      loadMessages()
    })

    onUnmounted(() => {
    try {
      // 清理WebSocket连接和监听器
      console.log('关闭WebSocket连接...');
      wsManager.close();
    } catch (error) {
      console.error('关闭WebSocket连接失败:', error);
    }
  })

    return {
      // 响应式数据
      conversationId,
      conversationTitle,
      messages,
      messageStatus,
      inputContent,
      loading,
      loadingMore,
      sending,
      noMoreMessages,
      scrollToView,
      
      // 计算属性
      messageGroups,
      
      // 方法
      sendMessage,
      resendMessage,
      loadMessages,
      loadMoreMessages,
      formatMessageTime,
      shouldShowTimeDivider,
      navigateBack,
      showOptions
    }
  }
}
</script>

<style scoped>
.chat-detail {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #FFF5F7 0%, #FFE6F0 100%);
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  background: linear-gradient(180deg, rgba(255, 182, 212, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 0;
  animation: floatSoft 8s ease-in-out infinite;
}

.bg-decoration-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 182, 212, 0.1) 0%, rgba(255, 182, 212, 0) 100%);
  z-index: 0;
  animation: floatSoft 10s ease-in-out infinite reverse;
}

/* 顶部导航栏 */
.chat-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: linear-gradient(90deg, #FF69B4 0%, #FF85B3 100%);
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 10rpx 30rpx rgba(255, 105, 180, 0.2);
}

.header-left,
.header-right {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.header-left:active,
.header-right:active {
  background-color: rgba(255, 255, 255, 0.2);
}

.header-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

/* 消息列表 */
.message-list {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  z-index: 1;
}

.time-divider {
  text-align: center;
  padding: 15rpx 0;
  font-size: 12px;
  color: #FF85B3;
  position: relative;
}

.time-divider::before,
.time-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1rpx;
  background-color: rgba(255, 133, 179, 0.3);
}

.time-divider::before {
  left: 0;
}

.time-divider::after {
  right: 0;
}

.message-wrapper {
  display: flex;
  margin-bottom: 20rpx;
  align-items: flex-end;
  animation: fadeInUp 0.3s ease-in-out;
}

.user-message {
  justify-content: flex-end;
}

.ai-message {
  justify-content: flex-start;
}

.message-content {
  max-width: 70%;
  padding: 15rpx 20rpx;
  border-radius: 24rpx;
  word-wrap: break-word;
  line-height: 1.6;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s ease;
  backdrop-filter: blur(5rpx);
}

.user-message .message-content {
  background: linear-gradient(135deg, #FF69B4 0%, #FF85B3 100%);
  color: #fff;
  border-bottom-right-radius: 8rpx;
}

.ai-message .message-content {
  background-color: #fff;
  color: #333;
  border-bottom-left-radius: 8rpx;
  border: 1rpx solid rgba(255, 133, 179, 0.2);
}

.user-message .message-content:active,
.ai-message .message-content:active {
  transform: scale(0.98);
}

.text-message {
  font-size: 16px;
}

/* 消息状态 */
.message-status {
  margin-left: 8rpx;
  margin-bottom: 4rpx;
  display: flex;
  align-items: center;
}

/* 正在输入 */
.typing-message {
  padding: 15rpx 20rpx;
  background-color: #fff;
  border-radius: 24rpx;
  border-bottom-left-radius: 8rpx;
  border: 1rpx solid rgba(255, 133, 179, 0.2);
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
}

.typing-dots {
  display: flex;
  align-items: center;
  height: 20px;
}

.dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: #FF85B3;
  margin: 0 6rpx;
  animation: typing 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.6;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 撤回消息 */
.recalled-message {
  padding: 15rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.7);
  color: #FF85B3;
  font-size: 12px;
  border-radius: 24rpx;
  border: 1rpx dashed rgba(255, 133, 179, 0.3);
}

/* 加载更多 */
.load-more,
.no-more {
  text-align: center;
  padding: 15rpx 0;
  font-size: 12px;
  color: #FF85B3;
  border-radius: 20rpx;
  margin: 10rpx 0;
}

.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.5);
}

.load-more text {
  margin-left: 10rpx;
}

/* 输入区域 */
.input-area {
  background-color: #fff;
  border-top: 1rpx solid rgba(255, 133, 179, 0.2);
  padding: 15rpx 20rpx;
  backdrop-filter: blur(10rpx);
  z-index: 2;
}

.input-wrapper {
  display: flex;
  align-items: center;
}

.message-input {
  flex: 1;
  height: 60rpx;
  padding: 0 20rpx;
  background-color: #FFF5F7;
  border-radius: 30rpx;
  font-size: 15px;
  border: 1rpx solid rgba(255, 133, 179, 0.3);
  transition: all 0.3s ease;
}

.message-input:focus {
  border-color: #FF85B3;
  background-color: #fff;
  box-shadow: 0 0 0 4rpx rgba(255, 133, 179, 0.1);
}

.message-input::placeholder {
  color: #FFB3D1;
}

.send-button {
  margin-left: 15rpx;
  height: 60rpx;
  padding: 0 25rpx;
  background: linear-gradient(135deg, #FF69B4 0%, #FF85B3 100%);
  color: #fff;
  font-size: 15px;
  border-radius: 30rpx;
  line-height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5rpx 15rpx rgba(255, 105, 180, 0.3);
  transition: all 0.3s ease;
  border: none;
}

.send-button:not(:disabled):active {
  transform: scale(0.95);
  box-shadow: 0 3rpx 10rpx rgba(255, 105, 180, 0.4);
}

.send-button:disabled {
  background-color: #FFD1E0;
  color: #FFB3D1;
  box-shadow: none;
}

/* 动画定义 */
@keyframes floatSoft {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20rpx) scale(1.05);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
<!-- 
/* 消息列表 */
.message-list {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.time-divider {
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  color: #999;
}

.message-wrapper {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-end;
}

.user-message {
  justify-content: flex-end;
}

.ai-message {
  justify-content: flex-start;
}

.message-content {
  max-width: 70%;
  padding: 10px 12px;
  border-radius: 10px;
  word-wrap: break-word;
  line-height: 1.5;
}

.user-message .message-content {
  background-color: #07c160;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ai-message .message-content {
  background-color: #fff;
  color: #333;
  border-bottom-left-radius: 4px;
}

.text-message {
  font-size: 15px;
}

/* 消息状态 */
.message-status {
  margin-left: 4px;
  margin-bottom: 2px;
}

/* 正在输入 */
.typing-message {
  padding: 10px 12px;
  background-color: #fff;
  border-radius: 10px;
  border-bottom-left-radius: 4px;
}

.typing-dots {
  display: flex;
  align-items: center;
  height: 20px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  margin: 0 2px;
  animation: typing 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* 撤回消息 */
.recalled-message {
  padding: 10px 12px;
  background-color: #f5f5f5;
  color: #999;
  font-size: 12px;
  border-radius: 10px;
}

/* 加载更多 */
.load-more,
.no-more {
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  color: #999;
}

.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
}

.load-more text {
  margin-left: 5px;
}

/* 输入区域 */
.input-area {
  background-color: #fff;
  border-top: 1px solid #eee;
  padding: 8px 16px;
}

.input-wrapper {
  display: flex;
  align-items: center;
}

.message-input {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  background-color: #f5f5f5;
  border-radius: 20px;
  font-size: 15px;
}

.send-button {
  margin-left: 12px;
  height: 36px;
  padding: 0 20px;
  background-color: #07c160;
  color: #fff;
  font-size: 14px;
  border-radius: 18px;
  line-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-button:disabled {
  background-color: #ccc;
}
</style> -->